<!DOCTYPE html>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue.js-->
    <script src="js/vue.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <!--一定要先引入vue.js再引入index.js因为elementui是基于vue.js实现的,如果不先引入vue.js elementui的js无用-->
    <script src="element-ui/lib/index.js"></script>
    <!--导入axios-->
    <script src="js/axios-0.18.0.js"></script>


</head>
<body>

<div id="app">
    <el-container>
        <el-header style="font-size:40px;">
            -----------------------实验报告上传系统-----------------------
            <el-button type="info" size="mini" round @click="logout">退出登录</el-button>

        </el-header>

        <el-container>
            <el-aside width="200px">
                <!--左侧导航栏-->
                <el-menu :default-openeds="['1', '3']">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-message"></i>人员班级管理</template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1" @click="selectClass">班级管理</el-menu-item>
                            <el-menu-item index="1-2" @click="selectTeacher">教师管理</el-menu-item>
                            <el-menu-item index="1-3" @click="selectStudent">学生管理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>

            </el-aside>
            <el-main>
                <!--添加表单-->
                <div align="right" >
                    <el-button type="primary"
                               @click="dialogFormVisible = true">新增班级</el-button>
                </div>

                <el-dialog title="新增班级" :visible.sync="dialogFormVisible">
                    <el-form :model="addForm">
                        <el-form-item label="班级名称" label-width="120px">
                            <el-input v-model="addForm.name" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addHandle">确 定</el-button>
                    </div>
                </el-dialog>

                <!--编辑对话框表单-->
                <el-dialog title="修改班级信息" :visible.sync="updateDialogFormVisible">
                    <el-form :model="updateForm">
                        <el-form-item label="班级名称" label-width="120px">
                            <el-input v-model="updateForm.name" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="updateDialogFormVisible=false">取 消</el-button>
                        <el-button type="primary" @click="updateById">确 定</el-button>
                    </div>
                </el-dialog>

                <!--表格-->
                <el-table :data="deptTableData" border>

                    <el-table-column prop="id" label="序列号" width="120">
                    </el-table-column>
                    <el-table-column prop="name" label="班级名称" width="120">
                    </el-table-column>

                    <el-table-column  label="操作">
                        <template slot-scope="scope">
                        <el-button type="primary" plain @click="selectById(scope.row.id)">编辑</el-button>
                        <el-button type="danger" plain @click="deleteHandle(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>



                </el-table>

            </el-main>
        </el-container>
    </el-container>

</div>
<style>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
    }
</style>

</body>
</html>

<script>

    new Vue({
        el: "#app",
        data: {
            updateDialogFormVisible: false,
            dialogFormVisible: false,
            dialogVisible: false,
            page: 1,
            pageSize: 10,
            tableData: [],
            deptTableData: [{
                id: 1,
                name: '学工部',
            }],
            addForm: {
                name: ''
            },
            updateForm: {
                name: ''
            }
        },
        methods: {
            logout(){
                axios.get("/logout").then(res=>{
                    if (res.data.code === 1) {
                        localStorage.removeItem("user");
                        window.location.href = 'login.html';
                    } else {
                        this.$message.error(res.data.msg || '操作失败')
                    }

                })
            },
            updateById(id){
                this.updateDialogFormVisible=false;
                axios.put("/class",{
                    "id": this.updateForm.id,
                    "name": this.updateForm.name
                }).then(res=>{
                    if (res.data.code === 1) {
                        this.$message.success('修改成功！')
                    } else {
                        this.$message.error(res.data.msg || '操作失败')
                    }
                    this.selectClass();
                })
            },
            selectById(id){
                this.updateDialogFormVisible=true;
                axios.get("/class/"+id).then(res=>{
                    this.updateForm=res.data.data;
                })
            },
            addHandle(){
                this.dialogFormVisible=false;
                axios.post("/class",{"name": this.addForm.name}).then(res=>{
                    if (res.data.code === 1) {
                        this.$message.success('添加成功！')
                        this.selectClass();
                    } else {
                        this.$message.error(res.data.msg || '操作失败')
                    }
                })
            },
            deleteById(id){
                axios.delete("/class/"+id).then(res=>{
                    if (res.data.code === 1) {
                        this.$message.success('删除成功！')
                    } else {
                        this.$message.error(res.data.msg || '操作失败')
                    }
                    this.selectClass();
                })
            },
            deleteHandle(id){
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    'confirmButtonText': '确定',
                    'cancelButtonText': '取消',
                    'type': 'warning'
                }).then(() => {
                   this.deleteById(id);
                })

            },
            selectStudent(){
                window.location.href = 'student.html';
            },
            selectTeacher() {
                window.location.href = 'teacher.html';
            },
            selectClass() {
                axios.get("/class").then(res => {
                    if (res.data.code != 1) {
                        this.$.message.error(res.data.msg);
                    } else {
                        this.deptTableData = res.data.data;
                    }

                })
            }
        },
        mounted() {
            if(localStorage.getItem("user")==null){
                window.location.href='login.html';
            }
            this.selectClass();
        }
    })
</script>